<template>
  <div class="app-container">
    <el-form :inline="true" :model="filters" class="demo-form-inline filter-container">
      <!--<el-form-item prop="userType" label="账户类型">-->
        <!--<el-select v-model="filters.userType">-->
         <!--<el-option label="全部" :value="undefined"></el-option>-->
          <!--<el-option v-for="item in consts.ACCOUNT_TYPE"-->
                      <!--v-if="item.value != -1"-->
                     <!--:key="item.value"-->
                     <!--:label="item.title"-->
                     <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item prop="userName"  label="账户名">
        <el-input v-model="filters.userName" placeholder="输入账户名"/>
      </el-form-item>
      <el-form-item label="IP：">
        <el-input v-model="filters.ip"/>
      </el-form-item>
      <el-button type="primary" v-waves icon="el-icon-search" @click="search">搜索</el-button>
    </el-form>

    <el-table :data="tableData.list" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="账户名" align="center">
        <template slot-scope="{row}">
          {{row.userName}}
        </template>
      </el-table-column>
      <el-table-column label="账户类型" align="center">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="{row}">
          {{row.reallyName}}
        </template>
      </el-table-column>
      <el-table-column label="注册IP" align="center">
        <template slot-scope="{row}">
          {{row['regIP']}}
        </template>
      </el-table-column>
      <el-table-column label="IP归属地" align="center">
        <template slot-scope="{row}">
          {{row['regGeo']["country"]}} {{row['regGeo']["region"]}} {{row['regGeo']["city"]}}
        </template>
      </el-table-column>
      <!--<el-table-column label="来源" align="center">-->
      <!--<template slot-scope="{row}">-->
      <!--{{row.ipSource | toConverter('DEVICE_TYPE')}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="上次登录IP" align="center">
        <template slot-scope="{row}">
          {{row.loginIP}}
        </template>
      </el-table-column>
      <el-table-column label="IP归属地" align="center">
        <template slot-scope="{row}">
          {{row['loginGeo']["country"]}} {{row['loginGeo']["region"]}} {{row['loginGeo']["city"]}}
        </template>
      </el-table-column>
      <el-table-column label="上次登录时间" align="center"  width="200">
        <template slot-scope="{row}">
          {{row.loginTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="重叠IP" align="center">
        <template slot-scope="{row}">
<!--          <el-button   type="text" @click="toRiskLogin(row)">{{row.ip}}</el-button>-->
          <el-button v-if="isLink" type="text" @click="toRiskLogin(row)">{{row.ip}}</el-button>
          <span v-else>{{row.ip}}</span>
        </template>
      </el-table-column>
      <el-table-column label="IP归属地" align="center">
        <template slot-scope="{row}">
          {{row['ipGeo']["country"]}} {{row['ipGeo']["region"]}} {{row['ipGeo']["city"]}}
        </template>
      </el-table-column>
    </el-table>

    <el-tip style="margin-top:30px;">PS：这里显示的都是有重叠IP的账户</el-tip>

    <div class="pagination-container">
        <el-pagination
              bordered
              layout="total, sizes, prev, next"
              :disabled="loading"
              @size-change="cursorGridSizeChange"
              @prev-click="cursorPrevClickChange"
              @next-click="cursorNextClickChange"
              :current-page="filters.page"
              :page-size="filters.size"
              :page-sizes="gridPageSize"
              :total="tableData.total">
            </el-pagination>
    </div>
  </div>
</template>

<script>
import { form, grid } from '@/build';

import {
  riskIpOverlayListApi as listApi,
} from '@/services/api/risk';

export default {
  name: 'ip-overlay',

  mixins: [form, grid],

  props: ['username'],

  data() {
    return {
      tableData: {},
      filters: {
        userType: undefined,
        userName: this.username,
        ip: undefined,
        cursor: 0,
        page: 1,
      },
    };
  },
  created() {
    if (this.$route.query.userName) this.filters.userName = this.$route.query.userName;
  },
  computed: {
    ...mapState({
      permission: state => state.permission,
    }),
    isLink() {
      const riskPermission = _.find(this.permission.userPermissionTree, item => item.name === 'risk');
      if (riskPermission && riskPermission.children && riskPermission.children.length > 0) {
        const riskLoginPermission = _.find(riskPermission.children, item => item.name === 'risk-login');
        return !!riskLoginPermission;
      }
      return false;
    },
  },
  methods: {
    toRiskLogin(data) {
      this.$router.push({
        path: '/risk/risk-login',
        query: {
          userName: data.userName,
        },
      });
    },
    search() {
      if ((this.filters.userName == '' || this.filters.userName == undefined) && (this.filters.ip == '' || this.filters.ip == undefined)) {
        this.$message({
          type: 'warning',
          message: '请输入用户名或者ip',
        });
        return false;
      }
      this.gridSearch();
    },
  },
  mounted() {
    this.bindGet(listApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });

    // this.getAll();
  },
};
</script>
